<template>
    <div class="memberDistribution">
      <div class="memberDistribution-top">
        <van-row>
          <van-col span="24">
            <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;"  @click="grade=true">等级筛选<i class="iconfont icon-xia"></i></van-button>
          </van-col>
        </van-row>
      </div>

      <!--内容部分-->
      <div class="memberDistribution-content">

        <!--等级分布图-->
        <div id="dengji" style="width:98%;height:280px;margin:0 auto;overflow: hidden"></div>
        <div style="border:1px solid #ddd;">
          <van-row style="background: #ddd;" class="tablesss">
            <van-col style="padding:5px 0;border-right:1px solid #ccc;" span="8">会员等级</van-col>
            <van-col style="padding:5px 0;border-right:1px solid #ccc;" span="8">会员人数</van-col>
            <van-col style="padding:5px 0;" span="8">占比</van-col>
          </van-row>
          <van-row v-if="!levelData.length" style="border:1px solid #ccc;border-top:0;">
            <van-col span="24" style="padding:10px 0;text-align: center;color:#ddd">暂无数据</van-col>
          </van-row>
          <van-row v-else v-for="(item,idx) in levelData" :key="idx">
            <van-col style="padding:5px 0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{item.name}}</van-col>
            <van-col style="padding:5px 0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{item.num}}</van-col>
            <van-col style="padding:5px 0;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{item.zb}}</van-col>
          </van-row>
        </div>


        <!--性别分布图-->
        <div id="memberSex" style="width:98%;height:280px;margin:10px auto 10px;overflow:hidden"></div>
        <div style="border:1px solid #ddd;"  class="tablesss">
          <div style="display: flex;background: #ddd;">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">会员性别</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">会员人数</div>
            <div style="padding:5px 0;width:33.3%">占比</div>
          </div>
          <van-row v-if="!sexAll.length" style="border:1px solid #ccc;border-top:0;">
            <van-col span="24" style="padding:10px 0;text-align: center;color:#ddd">暂无数据</van-col>
          </van-row>
          <div v-else style="display: flex;" v-for="(item,idx) in sexAll" :keya="idx">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.name}}</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.num}}</div>
            <div style="padding:5px 0;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.ratio}}</div>
          </div>
        </div>


        <!--会员年龄分布-->
        <div id="memberAge" style="width:98%;height:300px;margin:10px auto 10px;" ></div>
        <div style="border:1px solid #ddd;"  class="tablesss">
          <div style="display: flex;background: #ddd;">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">年龄段</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">会员人数</div>
            <div style="padding:5px 0;width:33.3%">占比</div>
          </div>
          <van-row v-if="!ageAll.length" style="border:1px solid #ccc;border-top:0;">
            <van-col span="24" style="padding:10px 0;text-align: center;color:#ddd">暂无数据</van-col>
          </van-row>
          <div v-else style="display: flex;" v-for="(item,idx) in ageAll" :keyg="idx">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.name}}</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.num}}</div>
            <div style="padding:5px 0;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.ratio}}</div>
          </div>
        </div>


      </div>


      <!--等级弹出层-->
      <van-popup v-model="grade" @click-overlay="dengJiResult=dengJiResultPrev" class="djMask" style="">

        <div style="overflow: scroll;height:86%;margin-bottom:10px;padding-top:10px;border-bottom:1px solid #ddd;">

          <div v-if="dengJiList.length==0" style="color:#ddd;padding:10px 0;">暂无等级</div>
          <van-checkbox-group v-else v-model="dengJiResult">
            <van-cell-group>
              <van-cell style="text-align: left;" v-for="(item,index) in dengJiList" :title="` ${item.level_name}`" :key="index" >
                <van-checkbox :name="item.level" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>

        <!--按钮-->
        <van-row >
          <van-col span="12" style="padding:0 10px;">
            <van-button  class="maskBtn" @click="closeDengji">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn" @click="getGradeList">确定</van-button>
          </van-col>
        </van-row>

      </van-popup>

      <!--返回按钮-->
      <backs></backs>
    </div>
</template>

<script>
  // var echarts = require('echarts');

  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  // 引入饼图
  require('echarts/lib/chart/pie');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  import backs from "@/components/menu/backPrev";
    export default {
        name: "memberDistribution",
        components: {
          backs
        },
        data(){
          return {
            grade:false,
            dengJiList:[],//会员等级
            dengJiResult:[],//等级的值
            dengJiResultPrev:[],//记录

            levelAll:[],//等级的数据
            levelData:[],//等级表格数据

            sexAll:[],//会员性别
            ageAll:[]//会员年龄
          }
        },
        methods:{
          //获取会员等级
          getMemberDengj(){
            var $this=this;
            this.$http.member.get('vipLevel')
              .then(function (response) {
                // console.log(response.data.data);
                var empId = localStorage.getItem('empId')
                if(empId&&response.data.code){
                  $this.$toast.fail(response.data.message);
                  $this.$router.go(-1)
                  return;
                }
                $this.dengJiList=response.data.data;
              })
              .catch(function (error) {
                $this.$toast.fail('登陆过期，请重新登陆');
                console.log(error);
              });

          },
          //点击弹出层的确定按钮
          getGradeList(){
            this.grade=false;
            this.dengJiResultPrev=this.dengJiResult;
            this.getEchartsFn();
          },
          // 弹层的取消按钮
          closeDengji(){
            this.grade=false;
            this.dengJiResult=this.dengJiResultPrev;
          },
          //获取数据
          getEchartsFn(){
            var $this=this;
            // console.log($this.dengJiResultPrev)
            this.$http.member.post('/vipTable/distribute',{
              levelArr: $this.dengJiResultPrev
            })
              .then(function (response) {
                // console.log(response.data);
                $this.levelAll=response.data.data.level;

                //筛选性别
                $this.sexAll=[];
                if(response.data.data.sex){//判断有值得时候
                  for(var i=0;i<response.data.data.sex.length;i++){
                    if(response.data.data.sex[i].num>0){
                      $this.sexAll.push({
                        num:response.data.data.sex[i].num,
                        name:response.data.data.sex[i].name,
                        ratio:response.data.data.sex[i].ratio,
                      });
                    }
                  }
                }
                //筛选年龄
                $this.ageAll=[];
                if(response.data.data.age) {//判断有值得时候
                  for (var j = 0; j < response.data.data.age.length; j++) {
                    if (response.data.data.age[j].num > 0) {
                      $this.ageAll.push({
                        num: response.data.data.age[j].num,
                        name: response.data.data.age[j].name,
                        ratio: response.data.data.age[j].ratio,
                      });
                    }
                  }
                }

                $this.loadEchartsLevel();
                if(response.data.data.sex){
                  $this.loadEchartsSexAge(response.data.data.sex,"memberSex","会员性别分布","50%","50%","会员性别分布");
                  $this.loadEchartsSexAge(response.data.data.age,"memberAge","会员年龄分布","50%","60%","会员年龄分布");
                }else{
                  $this.loadEchartsSexAge([],"memberSex","会员性别分布","50%","50%","会员性别分布");
                  $this.loadEchartsSexAge([],"memberAge","会员年龄分布","50%","60%","会员年龄分布");
                }

              })
              .catch(function (error) {
                console.log(error);
              });
          },
          //加载等级图表
          loadEchartsLevel(){
            //方式一：
            // console.log(this.levelAll);
            /*var datas=Object.values(this.levelAll).map(i => {
              return {
                value : i.num,
                name : i.name+"("+i.ratio+")"
              }
            });
            this.levelData=Object.values(this.levelAll).map(i => {
              return {
                num : i.num,
                name : i.name,
                zb:i.ratio
              }
            });*/
            //方式二：


            var datas=[];
            for(let gkey in this.levelAll ){
              if(this.levelAll[gkey]["num"]!=0){
                datas.push({
                  value:this.levelAll[gkey]["num"],
                  name:this.levelAll[gkey]["name"]+"("+this.levelAll[gkey]["ratio"]+")",
                });
              }
            }
            var listData=[];
            for(let dj in this.levelAll ){
              if(this.levelAll[dj]["num"]!=0){
                listData.push({
                  num:this.levelAll[dj]["num"],
                  name:this.levelAll[dj]["name"],
                  zb:this.levelAll[dj]["ratio"]
                });
              }
            }
            this.levelData=listData;

            // console.log(this.levelData);
            var myChart = echarts.init(document.getElementById('dengji'));
            var option = {
              title : {
                text: '会员等级分布',
                subtext: '',
                x:'center'
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series : [
                {
                  name: '会员等级占比',
                  type: 'pie',
                  radius : '45%',
                  center: ['50%', '50%'],
                  data:datas,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            myChart.setOption(option);
          },
          //加载性别,年龄的图表
          loadEchartsSexAge(dataArr,obj,detail,x,y,name){
            //方式一不加条件
           /* var datas=Object.values(dataArr).map(i => {
              return {
                value : i.num,
                name : i.name+"("+i.ratio+")"
              }
            });*/

            var datas=[];
            for(var i=0;i<dataArr.length;i++){
              if(dataArr[i].num>0){
                datas.push({
                  value:dataArr[i].num,
                  name: dataArr[i].name+"("+dataArr[i].ratio+")"
                });


              }
              //
            }

            var myChart = echarts.init(document.getElementById(obj));
            var option = {
              title : {
                text: detail,
                subtext: '',
                x:'center'
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              series : [
                {
                  name: name,
                  type: 'pie',
                  radius : '50%',
                  center: [x,y],
                  data:datas,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            myChart.setOption(option);
          }
        },
        mounted(){
          this.getMemberDengj();
          this.getEchartsFn();
        }
    }
</script>

<style scoped>
  .memberDistribution{
    font-size:15px;
    color:#666;
  }
  .tablesss{
    background: #fff;
  }
  .memberDistribution .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .memberDistribution .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .memberDistribution [class*=van-hairline]::after{
    border:0;
  }

  .memberDistribution-top{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
  }
  .memberDistribution .van-popup{
    width:100%;
  }
  .memberDistribution-content{
    margin-top:45px;
    padding-bottom:20px;
    background: #fff!important;
    padding:3px 5px;
  }
  .djMask{
    width:320px!important;height:475px;background: #fff!important;border-radius: 5px;
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }

</style>
